/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-13 14:56:49
 * @LastEditTime: 2023-08-01 00:16:44
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Flex,
  Table,
  TableContainer,
  Tbody,
  Td,
  Text,
  Th,
  Thead,
  Tr,
} from '@chakra-ui/react';
import { useEffect } from 'react';

import userService from '@/api/user.service';
import { RootState } from '@/store';
import { useAppDispatch, useAppSelector } from '@/store/hooks';
import { setCommissionRecordList } from '@/store/profileSlice';

export default function DetailTable() {
  const { commissionRecordList } = useAppSelector(
    (store: RootState) => store.profile
  );
  const dispatch = useAppDispatch();
  useEffect(() => {
    if (!commissionRecordList) {
      userService.listCommissionRecord().then((data) => {
        Array.isArray(data.rt) && dispatch(setCommissionRecordList(data.rt));
      });
    }
  }, [commissionRecordList, dispatch]);

  console.log(commissionRecordList);
  return (
    <Flex direction="column" gap="4" px="2" pb="4">
      <TableContainer>
        <Table variant="simple" size="sm">
          <Thead>
            <Tr>
              <Th>推荐账户</Th>
              <Th>佣金比例(%)</Th>
              <Th>充值金额(¥)</Th>
              <Th>佣金收益(图蝇币)</Th>
              <Th>佣金状态</Th>
              <Th>日期</Th>
            </Tr>
          </Thead>
          <Tbody>
            {commissionRecordList?.map((r: any) => (
              <Tr key={r.createTime + r.inviteeName}>
                <Td>
                  <Text fontSize="xs">{r.inviteeName}</Text>
                </Td>
                <Td>
                  <Text fontSize="xs">{r.ratio}</Text>
                </Td>
                <Td>
                  <Text fontSize="xs">{r.expenses}</Text>
                </Td>
                <Td>
                  <Text fontSize="xs">{r.commission}</Text>
                </Td>
                <Td>
                  <Text fontSize="xs">{r.isClosed ? '已到账' : '确认中'}</Text>
                </Td>
                <Td>
                  <Text fontSize="xs">{r.createTime}</Text>
                </Td>
              </Tr>
            ))}
          </Tbody>
        </Table>
      </TableContainer>
    </Flex>
  );
}
